<template>
  <div class="topUp">
    <div class="topUpTitle">
      <p>{{topUpTitle}}</p>
      <p class="topUpRBtn">
        <router-link :to="{name:'accountDetails',query:{perIndex:'3',actionType:'1'}}">
          充值记录<span><Icon type="ios-arrow-right"></Icon></span>
        </router-link>
      </p>
    </div>
    <div class="topUpCenter">
      <div class="topUpCTitle">
        <p>请选择存款方式</p>
        <p class="line"></p>
      </div>
      <div class="topUpCList">
        <ul>
          <li v-for="(list,l) in topUpList">
            <router-link :to="{name: 'newsBank', query: {id: 4, payId: list.id}}">
              <article class="topUpListArt" :class="{'green': l === 1}">
                <figure><img :src="list.iconImg" alt=""></figure>
                <section>{{list.name}}</section>
              </article>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="topUpCareFul">
        <aside>注意事项</aside>
        <article class="topUpArtText">
          <p>1、每次存款前，请先至本页面查看最新的收款账户。请勿自行存款至旧账户，若存款至旧账户，本公司将无法查收，恕不负责。</p>
          <p>2、请尽量选择同行存款，如跨行请进行加急，方便系统加快您的入款速度。</p>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import './topUpWeb.scss'
export default {
  data () {
    return {
      topUpTitle: "存款专区",
      topUpList: []
    }
  },
  activated () {
    this.initData();
  },
  methods: {
    initData () {
      let that = this;
      // 充值方式
      that._Util.post(that, that._Api.POST_ALL_PAYMENT_LIST, {client: 'pc'}, (data) => {
        let str = '';
        data.paymentList.forEach((v)=> {
          str = require('../../../assets/images/personal/pay/' + v.id + '.png');
          v.iconImg = str;
        });
        that.topUpList = data.paymentList;
      })
    }
  }
}
</script>
